<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box">
        <span></span>
        <!-- 注释 -->
        <p>
            <span></span>
        </p>
        <h2>22</h2>
        <h3>33</h3>
    </div>

    <script>

        // 整个页面查询   byId    byClassName    byTagName    qs     qsa 


        // 找爹
        //    parentElement


        // 找儿子
        //   children
        //   firstElementChild
        //   lastElementChild
        //   children[i]   // 下标访问第几个


        // 找兄弟
        //    上一个  previousElementSibling
        //    下一个  nextElementSibling





        // 标签和节点
        //   标签获取叫元素
        //   节点：文本，注释，标签，属性等等都称为节点
        var oBox = document.querySelector('.box');
        console.log(oBox.children);
        console.log(oBox.childNodes);


        var oP = document.querySelector('p');

        console.log(oP.parentElement);  // 找父元素  单个


        console.log(oP.children);   // 找到子元素  集合  --- 伪数组

        console.log(oP.firstElementChild);  // 第一个子元素
        console.log(oP.lastElementChild);  // 最后一个子元素
        console.log(oP.children[1]);  // 第二个  下标访问


        console.log(oP.nextElementSibling);   // 下一个兄弟元素

        console.log(oP.nextElementSibling.nextElementSibling);


        console.log(oP.previousElementSibling);  // 上一个兄弟元素

    </script>

</body>

</html>